import styles from "./dialog-message-input.module.scss"
import {useState} from "react";
import {Button, Input} from "antd";
import {userChatStore} from "@/app/store/chat-store";

interface Props {
    onEnter: (value: string) => void;
}

export function DialogMessageInput(props: Props) {
    const {onEnter} = props;
    const chatStore = userChatStore();
    const [value, setValue] = useState<string>();

    const onSend = (value: any) => {
        if (value && value.length > 0) {
            // 输入内容
            onEnter(value);
            // 清空当前对话框
            setValue(undefined);
        }
    }

    const handlerKeyDown = (e: any) => {
        if (e.ctrlKey && e.key === "Enter") {
            onSend(value);
        }
    }

    return (
        <div className={styles.wrapper}>
            <Input.TextArea value={value}
                            onChange={(e) => setValue(e.target.value)}
                            className={styles.textarea}
                            placeholder={"请输入"} autoFocus
                            onPressEnter={(e) => onSend(e)}
                            onKeyDown={handlerKeyDown}/>
            <Button type="primary" className={!value?.length ? `${styles["btn"]}` : `${styles["btn-active"]}`}
                    onClick={() => onSend(value)}>发送(Ctrl+Enter)</Button>
        </div>
    );
}